<template>
  <div>
    <Header_h />
    <article class="core_content">
      <div class="containers">
         <div class="new_banner" @click="webUrl(banner[0].href)">
            <img v-if="banner[0]" :src="banner[0].tpic" alt="" />
        </div>
        <section class="s_flex s_justify_content s_flex-wrap">
          <div
            class="flex-item"
            v-for="item in list.list"
            :key="item.id"
            @click="goNews(item.id)"
          >
            <img :src="item.tpic" alt="" />
            <div>
              <p>
                <span class="sq_success" v-if="item.active_status == 1"
                  >报名中</span
                >
                <span class="sq_end" v-if="item.active_status == 2"
                  >已结束</span
                >
                <span class="content_color">{{ item.create_time }}</span>
              </p>
              <p class="title_size title_color">
                {{ item.title }}
              </p>
              <p class="content_color">
                <i class="iconfont icon-didian"></i>
                {{ item.active_pos }}
              </p>
            </div>
          </div>
        </section>
      </div>
    </article>
    <Footer />
      <rightMenu @moveTo="moveTo" />
    <navItem />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import { activityList, bannerList } from "@/api/web";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
    
    rightMenu
  },
  data() {
    return {
      list: [],
      banner: [],
    };
  },
  mounted() {
    this.getList();
    this.getBanner();
  },
  methods: {
     moveTo() {
      window.scrollTo(0, 0);
    },
    async getBanner() {
      try {
        this.banner = await bannerList({ from: 2 });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async getList() {
      try {
        this.list = await activityList();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    goNews(id) {
      this.$router.push({ path: "/web/activities/details", query: { id: id } });
    },
      webUrl(url){
      window.open(url)
    }
  },
};
</script>

<style lang="less" scoped>
/* core_content */
.core_content {
  background: #f7fbfe;
  padding: 40px 0;
}

.core_content .item_list_img {
  width: 224px;
  height: 127px;
  object-fit: cover;
  margin-right: 25px;
}

.core_content .item_list {
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.core_content .content_spacing {
  margin: 17px auto 30px;
}
.core_content_left {
  width: 70%;
  background-color: #fff;
  margin: 10px 0;
  // position: absolute;
  // top: 0;
  // left: 0;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
  // position: absolute;
  // top:0;
  // right: 0;
  // margin:10px 0;
}
.item_right_img {
  width: 281px;
  height: 181px;
  object-fit: cover;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}
/* core_content */

.flex-item {
  width: 29%;
  margin-top: 50px;
  background-color: #fff;
  padding: 10px;
}

.flex-item p {
  margin-top: 10px;
}
.flex-item p:last-child {
  margin-top: 30px;
}

.flex-item img {
  width: 100%;
}

.flex-item .sq_success,
.flex-item .sq_end {
  margin-right: 20px;
}

@media (max-width:750px) {
  .flex-item{
    width:100%;
  }
}
</style>